<template>
  <div class="store-detail">
    <!-- 头部面包屑 -->
    <el-page-header @back="handleGoBack" class="page-header">
      <template #content>
        <span class="page-title">门店详情</span>
      </template>
    </el-page-header>

    <!-- 门店基本信息 -->
    <el-card class="store-info-card">
      <el-row :gutter="20">
        <el-col :xs="24" :md="6">
          <div class="store-logo">
            <el-avatar :size="150" :src="storeInfo.logo" />
          </div>
        </el-col>
        <el-col :xs="24" :md="18">
          <div class="store-basic-info">
            <div class="store-title">
              <h2>{{ storeInfo.name }}</h2>
              <el-tag :type="getStatusTag(storeInfo.status)">
                {{ getStatusText(storeInfo.status) }}
              </el-tag>
            </div>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="门店编码">{{ storeInfo.code }}</el-descriptions-item>
              <el-descriptions-item label="门店类型">
                <el-tag :type="getTypeTag(storeInfo.type)">
                  {{ getTypeName(storeInfo.type) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="所属区域">{{ getRegionName(storeInfo.region) }}</el-descriptions-item>
              <el-descriptions-item label="开业日期">{{ storeInfo.openDate }}</el-descriptions-item>
              <el-descriptions-item label="营业时间">{{ storeInfo.businessHours }}</el-descriptions-item>
              <el-descriptions-item label="门店面积">{{ storeInfo.area }}㎡</el-descriptions-item>
              <el-descriptions-item label="店长">{{ storeInfo.manager }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ storeInfo.phone }}</el-descriptions-item>
              <el-descriptions-item label="门店地址" :span="2">{{ storeInfo.address }}</el-descriptions-item>
              <el-descriptions-item label="门店简介" :span="2">{{ storeInfo.description }}</el-descriptions-item>
            </el-descriptions>
            <div class="store-actions">
              <el-button type="primary" @click="handleEdit">编辑信息</el-button>
              <el-button type="success" @click="handleViewDashboard">查看看板</el-button>
              <el-button type="warning" @click="handleSettings">门店设置</el-button>
              <el-button type="info" @click="handlePrint">打印信息</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 门店统计数据 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <el-icon :size="24"><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ storeStats.staffCount }}</div>
            <div class="stat-label">员工数</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <el-icon :size="24"><Goods /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ storeStats.productCount }}</div>
            <div class="stat-label">商品种类</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <el-icon :size="24"><ShoppingCart /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ storeStats.todayOrders }}</div>
            <div class="stat-label">今日订单</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <el-icon :size="24"><Money /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">¥{{ (storeStats.todaySales / 10000).toFixed(1) }}万</div>
            <div class="stat-label">今日销售</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
            <el-icon :size="24"><Coin /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">¥{{ (storeStats.monthSales / 10000).toFixed(1) }}万</div>
            <div class="stat-label">本月销售</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <div class="stat-item">
          <div class="stat-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
            <el-icon :size="24"><TrendCharts /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">¥{{ (storeStats.yearSales / 10000).toFixed(1) }}万</div>
            <div class="stat-label">本年销售</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- Tab页签 -->
    <el-card>
      <el-tabs v-model="activeTab">
        <!-- 门店员工 -->
        <el-tab-pane label="门店员工" name="staff">
          <el-table :data="staffList" border stripe>
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="position" label="职位" width="120" />
            <el-table-column prop="phone" label="电话" width="140" />
            <el-table-column prop="entryDate" label="入职日期" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === 'active' ? '在职' : '离职' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="monthlySales" label="本月销售" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.monthlySales.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewStaff(row)">查看</el-button>
                <el-button link type="warning" @click="handleEditStaff(row)">编辑</el-button>
                <el-button link type="danger" @click="handleRemoveStaff(row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 商品库存 -->
        <el-tab-pane label="商品库存" name="inventory">
          <el-table :data="inventoryList" border stripe>
            <el-table-column prop="productCode" label="商品编码" width="120" />
            <el-table-column prop="productName" label="商品名称" min-width="200" />
            <el-table-column prop="category" label="分类" width="120" />
            <el-table-column prop="stock" label="库存数量" width="100" align="right">
              <template #default="{ row }">
                <el-tag :type="getStockTag(row.stock, row.minStock)">
                  {{ row.stock }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="minStock" label="安全库存" width="100" align="right" />
            <el-table-column prop="price" label="售价" width="100" align="right">
              <template #default="{ row }">
                ¥{{ row.price.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleStockIn(row)">入库</el-button>
                <el-button link type="warning" @click="handleStockOut(row)">出库</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 销售记录 -->
        <el-tab-pane label="销售记录" name="sales">
          <el-table :data="salesList" border stripe>
            <el-table-column prop="orderNo" label="订单号" width="150" />
            <el-table-column prop="orderTime" label="下单时间" width="160" />
            <el-table-column prop="customerName" label="客户" width="120" />
            <el-table-column prop="productCount" label="商品数量" width="100" align="center" />
            <el-table-column prop="amount" label="订单金额" width="120" align="right">
              <template #default="{ row }">
                <span class="sales-amount">¥{{ row.amount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式" width="100" />
            <el-table-column prop="salesperson" label="销售员" width="100" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getOrderStatusTag(row.status)">
                  {{ getOrderStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewOrder(row)">查看</el-button>
                <el-button link type="info" @click="handlePrintOrder(row)">打印</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 费用支出 -->
        <el-tab-pane label="费用支出" name="expense">
          <el-table :data="expenseList" border stripe>
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="type" label="费用类型" width="150" />
            <el-table-column prop="amount" label="金额" width="120" align="right">
              <template #default="{ row }">
                <span style="color: #f56c6c; font-weight: bold;">
                  ¥{{ row.amount.toLocaleString() }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式" width="120" />
            <el-table-column prop="handler" label="经手人" width="100" />
            <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleViewExpense(row)">查看</el-button>
                <el-button link type="warning" @click="handleEditExpense(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 操作日志 -->
        <el-tab-pane label="操作日志" name="logs">
          <el-table :data="logsList" border stripe>
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column prop="operator" label="操作人" width="120" />
            <el-table-column prop="type" label="操作类型" width="120">
              <template #default="{ row }">
                <el-tag :type="getLogTypeTag(row.type)">
                  {{ row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="操作内容" min-width="300" />
            <el-table-column prop="ip" label="IP地址" width="140" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, Goods, ShoppingCart, Money, Coin, TrendCharts
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 门店ID
const storeId = route.params.id

// 当前激活的Tab
const activeTab = ref('staff')

// 门店信息
const storeInfo = reactive({
  id: 1,
  code: 'SZ001',
  name: '深圳旗舰店',
  type: 'flagship',
  region: 'south',
  address: '深圳市南山区科技园南区深南大道9988号',
  manager: '张伟',
  phone: '0755-12345678',
  area: 1200,
  status: 'open',
  openDate: '2020-01-15',
  businessHours: '09:00-21:00',
  logo: 'https://via.placeholder.com/150',
  description: '深圳旗舰店是公司最大的门店之一，位于深圳核心商圈，提供优质的购物体验和专业的售后服务。'
})

// 门店统计
const storeStats = reactive({
  staffCount: 45,
  productCount: 1856,
  todayOrders: 328,
  todaySales: 156789,
  monthSales: 2456789,
  yearSales: 18567890
})

// 员工列表
const staffList = ref([
  { id: 1, name: '张伟', position: '店长', phone: '13800138001', entryDate: '2020-01-15', status: 'active', monthlySales: 456789 },
  { id: 2, name: '李芳', position: '销售顾问', phone: '13800138002', entryDate: '2020-03-20', status: 'active', monthlySales: 398765 },
  { id: 3, name: '王强', position: '高级顾问', phone: '13800138003', entryDate: '2019-11-01', status: 'active', monthlySales: 512345 },
  { id: 4, name: '陈敏', position: '销售顾问', phone: '13800138004', entryDate: '2021-05-10', status: 'active', monthlySales: 287654 },
  { id: 5, name: '刘洋', position: '收银员', phone: '13800138005', entryDate: '2021-08-15', status: 'active', monthlySales: 156789 }
])

// 库存列表
const inventoryList = ref([
  { id: 1, productCode: 'P001', productName: 'iPhone 15 Pro Max', category: '手机', stock: 45, minStock: 20, price: 9999 },
  { id: 2, productCode: 'P002', productName: 'MacBook Pro 16"', category: '电脑', stock: 12, minStock: 10, price: 19999 },
  { id: 3, productCode: 'P003', productName: 'iPad Air', category: '平板', stock: 8, minStock: 15, price: 4999 },
  { id: 4, productCode: 'P004', productName: 'AirPods Pro', category: '配件', stock: 67, minStock: 30, price: 1999 },
  { id: 5, productCode: 'P005', productName: 'Apple Watch Ultra', category: '手表', stock: 23, minStock: 20, price: 6999 }
])

// 销售记录
const salesList = ref([
  { id: 1, orderNo: 'SO202401001', orderTime: '2024-01-15 14:23:15', customerName: '张三', productCount: 2, amount: 11998, paymentMethod: '微信支付', salesperson: '李芳', status: 'completed' },
  { id: 2, orderNo: 'SO202401002', orderTime: '2024-01-15 15:12:08', customerName: '李四', productCount: 1, amount: 9999, paymentMethod: '支付宝', salesperson: '王强', status: 'completed' },
  { id: 3, orderNo: 'SO202401003', orderTime: '2024-01-15 16:05:32', customerName: '王五', productCount: 3, amount: 8997, paymentMethod: '银行卡', salesperson: '陈敏', status: 'pending' },
  { id: 4, orderNo: 'SO202401004', orderTime: '2024-01-15 17:20:45', customerName: '赵六', productCount: 1, amount: 19999, paymentMethod: '微信支付', salesperson: '李芳', status: 'completed' },
  { id: 5, orderNo: 'SO202401005', orderTime: '2024-01-15 18:15:22', customerName: '孙七', productCount: 2, amount: 15998, paymentMethod: '现金', salesperson: '刘洋', status: 'cancelled' }
])

// 费用支出
const expenseList = ref([
  { id: 1, date: '2024-01-01', type: '房租', amount: 25000, paymentMethod: '转账', handler: '张伟', remark: '2024年1月门店租金' },
  { id: 2, date: '2024-01-05', type: '水电费', amount: 3500, paymentMethod: '现金', handler: '李芳', remark: '12月水电费用' },
  { id: 3, date: '2024-01-10', type: '员工工资', amount: 85000, paymentMethod: '转账', handler: '张伟', remark: '12月工资发放' },
  { id: 4, date: '2024-01-12', type: '物业管理费', amount: 2800, paymentMethod: '转账', handler: '李芳', remark: '物业管理费' },
  { id: 5, date: '2024-01-15', type: '设备维修', amount: 1200, paymentMethod: '现金', handler: '王强', remark: '空调维修费用' }
])

// 操作日志
const logsList = ref([
  { id: 1, time: '2024-01-15 18:23:15', operator: '张伟', type: '商品管理', content: '新增商品：iPhone 15 Pro Max', ip: '192.168.1.100' },
  { id: 2, time: '2024-01-15 17:45:32', operator: '李芳', type: '订单处理', content: '完成订单：SO202401004', ip: '192.168.1.102' },
  { id: 3, time: '2024-01-15 16:30:08', operator: '王强', type: '库存管理', content: '商品入库：iPad Air x 20台', ip: '192.168.1.103' },
  { id: 4, time: '2024-01-15 15:12:45', operator: '陈敏', type: '客户管理', content: '新增会员：李明（手机：138****5678）', ip: '192.168.1.104' },
  { id: 5, time: '2024-01-15 14:05:22', operator: '刘洋', type: '系统设置', content: '修改门店营业时间', ip: '192.168.1.105' }
])

// 返回
const handleGoBack = () => {
  router.back()
}

// 编辑门店
const handleEdit = () => {
  router.push(`/store/list`)
  ElMessage.info('跳转到门店编辑页面')
}

// 查看看板
const handleViewDashboard = () => {
  router.push({
    path: '/store/dashboard',
    query: { storeId: storeId }
  })
}

// 门店设置
const handleSettings = () => {
  router.push({
    path: '/store/settings',
    query: { storeId: storeId }
  })
}

// 打印
const handlePrint = () => {
  ElMessage.info('打印功能开发中')
}

// 获取类型标签
const getTypeTag = (type) => {
  const map = {
    flagship: '',
    standard: 'success',
    community: 'info',
    franchise: 'warning'
  }
  return map[type] || 'info'
}

// 获取类型名称
const getTypeName = (type) => {
  const map = {
    flagship: '旗舰店',
    standard: '标准店',
    community: '社区店',
    franchise: '加盟店'
  }
  return map[type] || type
}

// 获取区域名称
const getRegionName = (region) => {
  const map = {
    east: '华东区',
    south: '华南区',
    north: '华北区',
    southwest: '西南区',
    northwest: '西北区'
  }
  return map[region] || region
}

// 获取状态标签
const getStatusTag = (status) => {
  const map = {
    open: 'success',
    renovation: 'warning',
    closed: 'danger'
  }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    open: '营业中',
    renovation: '装修中',
    closed: '暂停营业'
  }
  return map[status] || status
}

// 获取库存标签
const getStockTag = (stock, minStock) => {
  if (stock <= minStock * 0.5) return 'danger'
  if (stock <= minStock) return 'warning'
  return 'success'
}

// 获取订单状态标签
const getOrderStatusTag = (status) => {
  const map = {
    completed: 'success',
    pending: 'warning',
    cancelled: 'danger'
  }
  return map[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const map = {
    completed: '已完成',
    pending: '待处理',
    cancelled: '已取消'
  }
  return map[status] || status
}

// 获取日志类型标签
const getLogTypeTag = (type) => {
  const map = {
    '商品管理': 'primary',
    '订单处理': 'success',
    '库存管理': 'warning',
    '客户管理': 'info',
    '系统设置': 'danger'
  }
  return map[type] || 'info'
}

// 员工操作
const handleViewStaff = (row) => {
  ElMessage.info(`查看员工：${row.name}`)
}

const handleEditStaff = (row) => {
  ElMessage.info(`编辑员工：${row.name}`)
}

const handleRemoveStaff = (row) => {
  ElMessageBox.confirm(`确定要移除员工 "${row.name}" 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('移除成功')
  })
}

// 库存操作
const handleStockIn = (row) => {
  ElMessage.info(`${row.productName} 入库`)
}

const handleStockOut = (row) => {
  ElMessage.info(`${row.productName} 出库`)
}

// 订单操作
const handleViewOrder = (row) => {
  ElMessage.info(`查看订单：${row.orderNo}`)
}

const handlePrintOrder = (row) => {
  ElMessage.info(`打印订单：${row.orderNo}`)
}

// 费用操作
const handleViewExpense = (row) => {
  ElMessage.info(`查看费用明细`)
}

const handleEditExpense = (row) => {
  ElMessage.info(`编辑费用记录`)
}

// 组件挂载
onMounted(() => {
  console.log('门店ID:', storeId)
  // 这里可以根据storeId加载门店详情数据
})
</script>

<style scoped>
.store-detail {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
}

.store-info-card {
  margin-bottom: 20px;
}

.store-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.store-basic-info {
  padding: 10px 0;
}

.store-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.store-title h2 {
  margin: 0;
  font-size: 24px;
}

.store-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* 统计项 */
.stat-row {
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.stat-item:hover {
  transform: translateY(-3px);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
}

.stat-info {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

/* 销售金额 */
.sales-amount {
  color: #f56c6c;
  font-weight: bold;
}
</style>

